<template>
  <div class="popup">
    
    <div class="ps-toolbar">
      <div class="ps-left-tools">
        <h3>Video2Text</h3>
        <!-- 状态显示 -->
        <div class="status">
          <span v-if="hasVideo" class="success">✓ 检测到视频</span>
          <span v-else class="warning">{{ checking ? '检查中...' : '未检测到视频' }}</span>
        </div>
        <button class="ps-button"
          @click="extractText" 
          :disabled="!hasVideo || processing"
        >
          {{ processing ? '处理中...' : '提取文本' }}
        </button>
      </div>
      <div class="ps-right-tools">
          <!-- 操作按钮 -->
          <div class="actions">
            <button class="ps-button"  v-if="text" @click="copyText">复制文本</button>
          </div>
      </div>
    </div>
    
    <!-- 结果显示 -->
    <div v-if="text" class="result">
      <textarea v-model="text" readonly></textarea>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { extractAudio } from '@/utils/audio'
import { sendToBackend } from '@/utils/api'

export default defineComponent({
  name: 'Popup',
  setup() {
    const hasVideo = ref(false)
    const checking = ref(true)
    const processing = ref(false)
    const text = ref('')
    
    // 检查当前页面是否有视频
    async function checkVideo() {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
      if (!tab?.id) return false

      try {
        // 注入content script
        await chrome.scripting.executeScript({
          target: { tabId: tab.id },
          files: ['content.js']
        })

        // 等待一段时间确保content script加载完成
        await new Promise(resolve => setTimeout(resolve, 100))

        // 发送消息检查视频
        const response = await chrome.tabs.sendMessage(tab.id, { type: 'CHECK_VIDEO' })
        return response?.hasVideo || false
      } catch (error) {
        console.error('检查视频失败:', error)
        return false
      }
    }
    
    // 初始化检查
    onMounted(async () => {
      checking.value = true
      try {
        // 重试3次
        for (let i = 0; i < 3; i++) {
          const result = await checkVideo()
          if (result) {
            hasVideo.value = true
            break
          }
          await new Promise(resolve => setTimeout(resolve, 500))
        }
      } finally {
        checking.value = false
      }
    })
    
    // 提取文本
    const extractText = async () => {
      try {
        processing.value = true
        
        // 1. 提取音频
        const audioData = await extractAudio()
        console.log('[INFO] extractAudio 提取音频结果:', audioData)

        // 2. 发送到后端
        // const result = await sendToBackend(audioData)
        // console.log('[INFO] sendToBackend 后端返回结果:', result)
        
        // 3. 显示结果
        text.value = audioData.text || ''
        
      } catch (error) {
        console.error('提取失败:', error)
        alert('提取失败，请重试')
      } finally {
        processing.value = false
      }
    }
    
    // 复制文本
    const copyText = () => {
      navigator.clipboard.writeText(text.value)
      alert('复制成功')
    }
    
    return {
      hasVideo,
      checking,
      processing,
      text,
      extractText,
      copyText
    }
  }
})
</script>

<style scoped>
.popup {
  width: 750px;
  height: 550px;
  padding: 6px;
}

.status {
  margin: 5px 0;
}

.actions {
  margin: 5px 0;
}

.result {
  margin: 5px 8px;
}

textarea {
  width: 100%;
  height: 500px;
  margin-bottom: 8px;
}

/* 工具栏样式 */
.ps-toolbar {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(241, 241, 241, 0.8);
}

.ps-left-tools, .ps-right-tools {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ps-button {
    padding: 8px 16px;
    border: none; 
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.05);
}

.ps-button:hover {
    background: rgba(0, 0, 0, 0.15);
}

.ps-button.ps-active {
    background: var(--primary-color);
    color: white;
}


button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none; 
  border-radius: 8px;
  cursor: pointer;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style> 